<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { basicProps, basicProps2 } from "./props";
  import { analysisGetDataAPI, getEchartAPI } from '@/api/demo/analysis';
  import { useI18n } from "@/hooks/web/useI18n";
  const { t } = useI18n();
  defineProps({
    ...basicProps2,
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(async () => {
    let Data = await getEchartAPI('data');
    // let datesHours = [
    //
    // ];
    // let valuesHours = [1, 2, 3, 4, 4, 5, 6, 7, 8, 9, 0, 5, 6, 7, 8, 9, 0];
    // // if (Array.isArray(Data.data.hours)) {
    // //   // 获取最后 15 条数据
    // //   let last15DataHours = Data.data.hours.slice(-24);
    // //
    // //   // 提取 date 和 value 组成两个数组
    // //   datesHours = last15DataHours.map((item) => item.date);
    // //   valuesHours = last15DataHours.map((item) => item.value);
    // // }

    setOptions({
      title: {
        left: 'center',
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: t('sys.devstatistics.deviceOnLineCount') },
            { value: 735, name: t('sys.devstatistics.deviceOffLineCount')  },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  });
</script>
